﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />	
    <title>상품검색</title>

    <link href="@Url.Content("~/assets/css/bootstrap.css")" rel="stylesheet" type="text/css">
	<link href="@Url.Content("~/assets/css/bootstrap-responsive.css")" rel="stylesheet" type="text/css">
	<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css">
    <link href="@Url.Content("~/images/main_01.css")" rel="stylesheet" type="text/css">	

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>    
    <script src="@Url.Content("~/Scripts/API.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/common.js")" type="text/javascript"></script>

</head>
<body>
	<div class="popup_container">
		<div id="popup_content">
            <div style="margin:15px;">
			    <div style="float:left;">
					    <p style="font-size:16pt;" >제품검색 </p>				
			    </div>
			    <div class="input-append" style="float:right;">
                    <input type="text" id="q" class="span2 search-query" placeholder="입력하세요" />
                    <button class="btn" onclick="search();">검색</button>
			    </div>
			    <div style="clear:both;">
			    </div>
		    </div>
			<div style="margin:10px 10px 0px 10px; width:702px;height:35px;">
				<div style="background-color:#494949; width:100%; height:35px;border-top-right-radius:10px;border-top-left-radius:10px;">				
					<div style="float:left;width:200px;text-align:center;border-right: 1px solid #626262;">
						<span style="line-height:35px;color:white;font-size:9pt;">제품이미지</span>
					</div>
					<div style="float:left;width:350px;text-align:center;border-right: 1px solid #626262;">
						<span style="line-height:35px;color:white;font-size:9pt;">제품정보</span>
					</div>
					<div style="float:left;width:140px;text-align:center;">
						<span style="line-height:35px;color:white;font-size:9pt;">제품가격</span>
					</div>					
					<div style="clear:both;">
					</div>
				</div>
			</div>
            <div id="searchList"></div>		
			<div style="clear:both;">
				<div style="margin:0px 10px 10px 10px; width:700px;background-color:#f9f9f9; 
				height:5px;border-bottom-right-radius:5px;border-bottom-left-radius:10px;"></div>
				<div style="margin:10px;">
				</div>
			</div>
			
		</div>
	</div>	
	
	<!--------------------------------pagination----------------------------------------->
	<div class="pagination pagination-small pagination-centered">
	  <ul id="page">		
	  </ul>
	</div>

    <script>

        function SetParent() {
            opener.document.getElementById("Title").value = arguments[0];
            opener.document.getElementById("prd_title").innerHTML = arguments[0];
           
            opener.document.getElementById("LowPrice").value = arguments[1];
            opener.document.getElementById("price_min").innerHTML = setComma(arguments[1]);

            opener.$("#prd_image").attr("src", arguments[2]);
            
            opener.document.getElementById("Image").value = arguments[2];

            opener.$("#prd_link").attr("href", arguments[3]);
            opener.document.getElementById("Link").value = arguments[3];

            opener.document.getElementById("selected").style.display = "block";

            window.close();
        }

        function search(cnt) {
            cnt = cnt || 1;
            var val = document.getElementById("q").value;
            if (val != "") {
                // a : item_array, c : total_count
                D.Send(val, cnt, function (a, c) {

                    var result = $("#searchList");

                    // 아이템 나열
                    result.html("");

                    for (var i = 0; i < a.length; i++)
                    {
                        var img = $('<div class="popupcol" style="width:200px;border-right: 1px solid #e8e8e8;"><div  style="display: table-cell; vertical-align: middle;"><img src="' + a[i].image_url + '" alt="상품이미지"></div>');
                        var title = $('<div class="popupcol" style="width:350px;border-right: 1px solid #e8e8e8;"><div  style="padding:10px;display: table-cell; vertical-align: middle;"><span>' + a[i].title + '</span></div></div>');
                        var price = $('<div class="popupcol" style="width:140px;"><div  style="display: table-cell; vertical-align: middle;"><p><strong>' + a[i].price_min + '원</strong></p><a class="btn btn-warning" href="#" onclick="SetParent(\'' + a[i].title + '\', \'' + a[i].price_min + '\', \'' + a[i].image_url + '\', \'' + a[i].link + '\');"><i class="icon-chevron-down"></i>선택</a>');

                        var div = $('<div class="popupcontent" />');
                        div.append(img);
                        div.append(title);
                        div.append(price);

                        result.append(div);
                    }

                    // 페이징 처리
                    var page = $('#page');
                    page.html("");

                    if (a.length == 0) {
                        result.append($('<div style="text-align:center;margin:25px 0px 25px 0px;">조회된 데이터가 없습니다.</div>'));
                    }
                    else {
                        // 화면에 표시할 페이지 갯수
                        var vp = 5;
                        var last = 0;                        
                        var cIdx = cnt - 1;
                        var tp = Math.ceil(c / a.length) > 100 ? 100 : Math.ceil(c / a.length);

                        var first = (Math.floor((cIdx) / vp) * vp) <= 0 ? 1 : (Math.floor((cIdx) / vp) * vp);
                        
                        page.append('<li><a href="#1" onclick="window.search(1)">&lt&lt</a></li>');
                        page.append('<li><a href="#' + first + '" onclick="window.search(' + first + ')">&lt</a></li>');

                        for (var i = 1; i <= vp; i++) {

                            var x = Math.floor((cIdx) / vp) * vp;
                            var cur = cnt == i ? "active" : "";

                            (function (c) {
                                var aTag = $('<li class="'+cur+'"><a href="#' + (x + c) + '" onclick="window.search(' + (x + c) + ')">' + (x + c) + '</a></li>');
                                page.append(aTag);
                            })(i);

                            last = x + i;
                        }
                        
                        last = (last + 1 > 100 ? 100 : last + 1);
                        page.append('<li><a href="#' + (last) + '" onclick="window.search(' + (last) + ')">&gt</a></li>');
                        page.append('<li><a href="#' + (tp) + '" onclick="window.search(' + (tp) + ')">&gt&gt</a></li>');

                        
                    }
                });
            }
        }

    </script>

</body>
</html>

	